<!--  -->
<template>
  <div class="order-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getOrderList">
            <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 订单列表数据展示 -->
      <div class="order-table">
        <el-table :data="orderList" border stripe style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="order_number" label="订单编号"></el-table-column>
          <el-table-column prop="order_price" label="订单价格(元)"></el-table-column>
          <el-table-column label="是否付费">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.pay_status === '0'">未支付</el-tag>
              <el-tag type="success" v-else>已支付</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_send" label="是否发货"></el-table-column>
          <el-table-column label="下单时间">
            <template slot-scope="scope">{{ scope.row.create_time | dateFormat }}</template>
          </el-table-column>
          <el-table-column label="操作" width="180px">
            <template>
              <el-row>
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="updateAddress.updateAddressVisible = true"
                ></el-button>
                <el-button
                  type="success"
                  size="mini"
                  icon="el-icon-location"
                  @click="showLogisticProgress"
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页信息 -->
      <div class="order-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </div>
    </el-card>
    <!-- 修改地址对话框 -->
    <el-dialog title="修改地址" :visible.sync="updateAddress.updateAddressVisible" width="80%">
      <el-form
        label-width="100px"
        ref="updateAddressRef"
        :model="updateAddress.updateAddressForm"
        :rules="updateAddress.updateAddressRules"
      >
        <el-form-item label="省市区/县" prop="address">
          <el-cascader
            v-model="region.cityChecked"
            :clearable="true"
            :options="region.cityList"
            :props="region.cityProps"
            @change="handleCityChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input v-model="updateAddress.updateAddressForm.detailAddress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateAddress.updateAddressVisible = false">取消</el-button>
        <el-button @click="updateAddress.updateAddressVisible = false">确定</el-button>
      </span>
    </el-dialog>
    <!-- 显示物流进度对话框 -->
    <el-dialog title="物流进度" :visible.sync="logisticProgressVisible" width="50%">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(progress, index) in logisticProgress"
          :key="index"
          :timestamp="progress.time"
        >{{progress.context}}</el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import cityList from '../../../assets/js/cityData.js'
export default {
  data() {
    return {
      orderList: [], // 订单数据列表
      total: 0, // 订单总数量
      // 查询对象
      queryInfo: {
        query: '',
        pagenum: 1, // 当前页码
        pagesize: 10 // 每页显示订单条目/数量
      },
      updateAddress: {
        updateAddressVisible: false,
        updateAddressForm: {
          address: '',
          detailAddress: ''
        },
        updateAddressRules: {
          address: [
            { required: true, message: '请选择省市区/县', trigger: 'blur' }
          ],
          detailAddress: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ]
        }
      },
      region: {
        cityChecked: [],
        cityList,
        cityProps: {
          expandTrigger: 'hover'
        }
      },
      logisticProgressVisible: false,
      logisticProgress: []
    }
  },

  created() {
    this.getOrderList()
  },

  methods: {
    // 获取订单列表
    getOrderList() {
      this.axios
        .get('orders', {
          params: {
            query: this.queryInfo.query,
            pagenum: this.queryInfo.pagenum,
            pagesize: this.queryInfo.pagesize
          }
        })
        .then(resp => {
          if (resp.meta.status !== 200) {
            this.$message.error('获取订单列表失败')
          }
          console.log(resp)
          this.orderList = resp.data.goods
          this.total = resp.data.total
        })
    },
    // 处理分页每页条目改变
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getOrderList()
    },
    // 处理分页当前页码改变
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getOrderList()
    },
    // 处理省市区县级联选择改变
    handleCityChange() {},
    // 显示物流进度
    showLogisticProgress() {
      // 获取物流信息
      this.axios.get('/kuaidi/1106975712662').then(resp => {
        if (resp.meta.status !== 200) {
          this.$message.error('获取物流数据失败')
        }
        this.logisticProgress = resp.data
        this.logisticProgressVisible = true
      })
    }
  },

  components: {}
}
</script>

<style lang='scss' scoped>
.order-container {
  .box-card {
    .order-table {
      margin: 10px 0;
      font-size: 12px;
    }
  }
  .el-cascader {
    width: 100%;
  }
}
</style>
